<template>
  <div class="preview">
    <Transition name="fade">
      <pre v-highlight v-if="showBool" class="code"> <code  class="language-html ">{{ sourceCode }}</code> </pre>
    </Transition>
    <div class="block-control" @click="onSwitchShow">
      <span>{{ switchText }}</span>
    </div>

  </div>
</template>

<script setup>
import { ref, onMounted, computed, Transition } from "vue";
const props = defineProps({
  comName: {
    type: String,
    require: true,
  },
  demoName: {
    type: String,
    require: true
  }
})
const sourceCode = ref(null);
// 获取demo code
const getCode = async () => {
  sourceCode.value = (
    await import(/* @vite-ignore */ `../../packages/${props.comName}/doc/${props.demoName}.vue?raw`)
  ).default; //读取vue文件中的原代码
};
const showBool = ref(false) //代码内容显示｜隐藏
const switchText = computed(() => {
  return showBool.value ? "隐藏代码" : "显示代码"
})
const onSwitchShow = () => {
  showBool.value = !showBool.value;
}
onMounted(() => {
  getCode();
});
</script>

<style lang="scss" >
.preview {
  overflow: hidden;

  .code {
    height: auto;
  }

  .block-control {
    border-top: 1px solid #eaeefb;
    height: 44px;
    line-height: 44px;
    box-sizing: border-box;
    background-color: #fff;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    text-align: center;
    margin-top: -1px;
    color: #d3dce6;
    cursor: pointer;
    position: relative;
    font-size: 12px;

    &:hover {
      color: $primary;
    }
  }
}

// 中间过渡状态
.fade-enter-active,
.fade-leave-active {
  transition: all 1s ease;
  max-height: 1000px; //设置一个很大的高度
}

//初始状态 出现的初始状态 和消失的最终状态
.fade-enter-from,
.fade-leave-to {
  max-height: 0px; // 设置最小高度
}









// .fade-enter-from,
// .fade-leave-to {
//   transform: translateY(-100%);

// }

// .fade-enter-active,
// .fade-leave-active {
//   transition: .8s all ease;
// }

// .fade-enter-to,
// .fade-leave-from {
//   transform: translateY(0);
// }


// .fade-enter-active,
// .fade-leave-active {
//   transition: height 1s ease;
// }

// .fade-enter,
// .fade-leave-to {
//   height: 0;
// }
</style>
